import React from "react";
import ReactDOM from "react-dom/client";
import {
  HashRouter,
  BrowserRouter,
  Routes,
  Route,
  NavLink,
  Navigate,
  useRoutes,
} from "./react-router-dom";
import routesConfig from "./routesConfig";
//import Post from './components/Post';// 这是同步加载 1

// 路由懒加载 1
const LazyPost = React.lazy(() => import("./components/Post"));
const root = ReactDOM.createRoot(document.getElementById("root"));
//定义一个激活样式，背景色为绿色
const activeStyle = { backgroundColor: "green" };
//激活的类名
const activeClassName = "active";
//激活导航属性对象
const activeNavProps = {
  style: ({ isActive }) => (isActive ? activeStyle : {}),
  className: ({ isActive }) => (isActive ? activeClassName : ""),
};
function App() {
  const [routes, setRoutes] = React.useState(routesConfig);
  const addRoute = () => {
    setRoutes((prevRoutes) => [
      ...prevRoutes,

      /* 
	 
	 这是同步加载 2
	 
	 ...prevRoutes,
	  
		{
			path: "/post/:id",
			
			element: <Post />
		}
	 
	  */

      {
        path: "/post/:id",

        element: (
          // 路由懒加载 2

          // 它会先加载  <div>loading...</div> ，直到 LazyPost 加载完成
          <React.Suspense fallback={<div>loading...</div>}>
            <LazyPost />
          </React.Suspense>
        ),
      },
    ]);
  };
  return (
    <div>
      {useRoutes(routes)}
      {/* 	 这是同步加载 3 */}
      <button onClick={addRoute}>增加Post路由</button>
    </div>
  );
}
root.render(
  <BrowserRouter>
    <ul>
      <li>
        <NavLink end={true} to="/" {...activeNavProps}>
          首页
        </NavLink>
      </li>
      <li>
        <NavLink to="/user/list" {...activeNavProps}>
          用户管理
        </NavLink>
      </li>
      <li>
        <NavLink to="/profile" {...activeNavProps}>
          个人中心
        </NavLink>
      </li>
      <li>
        <NavLink to="/post/100" {...activeNavProps}>
          文章
        </NavLink>
      </li>
    </ul>
    <App />
  </BrowserRouter>
);
